<template>
    <div :style="{
        height: '100vh',
        overflow: 'hidden',
        position: 'relative',
        border: '1px solid #ebedf0',
        borderRadius: '2px',

        width: '100%',
    }">
        <a-card :bordered="false" class="mb-2">
            <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState"
                class="ant-advanced-search-form">
                <a-row :gutter="24">


                    <a-col :span="6">
                        <a-form-item label="项目名称" name="code">

                            <a-input-search v-model:value="searchFormState.proName" style="width: 100%"
                                placeholder="清选择项目" @click="onSearch" @search="onSearch" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="签证事由" name="item">
                            <a-input v-model:value="searchFormState.item" placeholder="请输入签证事由" />
                        </a-form-item>
                    </a-col>

                    <a-col :span="6">
                        <a-button type="primary" class="mr-2" @click="refresh(true)">查询</a-button>
                        <a-button style="margin: 0 8px" @click="reset">重置</a-button>
                    </a-col>
                </a-row>
            </a-form>
        </a-card>
        <a-card :bordered="false">
            
            <s-table bordered ref="tableRef" :data="loadData" :columns="columns" :pagination="false" class="mb-2"
                :tool-config="{ refresh: true, height: true, columnSetting: true, striped: false }" :scroll="{x:1200}">
                <template #operator class="table-operator">
                    <div style="display: flex; justify-content: space-between">
                        <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="searchFormState.role" style="width: 120px" :options="roles"
                            :fieldNames="{ label: 'label', value: 'value' }" placeholder="本人">
                        </a-select>
                        <a-space>
                            <a-button type="primary" @click="onOpen()">
                                <template #icon>
                                    <plus-outlined />
                                </template>
                                <span>新增</span>
                            </a-button>
                        </a-space>
                    </div>
                </template>
                <template #bodyCell="{ column, record, index }">
                    <template v-if="column.key === 'index'">
                        {{ index + 1 }}
                    </template>
                    
                    <template v-if="column.key === 'control'">
                        <div>
                            <a @click="onOpen(record)">编辑</a>
                            <a-divider type="vertical" />
                            <a-popconfirm title="确定删除此数据源？" @confirm="remove(record)">
                                <a-button type="link" danger size="small">删除</a-button>
                            </a-popconfirm>
                        </div>
                    </template>
                </template>
            </s-table>

        </a-card>

        <a-drawer :title="isEdit ? '签证信息' : '新建签证'" :width="1000" :visible="showEdit"
            :body-style="{ paddingBottom: '80px' }" placement="right" :style="{ position: 'absolute' }"
            :footer-style="{ textAlign: 'right' }" @close="onClose">
            <div>
                <visaedit @onClose="onClose" :disabled="isShow" ref="editRef"></visaedit>
            </div>
            <template #footer v-if="!isShow" >
                <a-button type="primary" @click="submit">保存</a-button>
                <a-button style="margin-left: 10px" @click="onClose">取消</a-button>
            </template>
        </a-drawer>

        <projectSelection ref="proSelect" @onClose="prSelectOk"  />
        <!-- <info ref="infoRef"></info> -->
    </div>
</template>

<script setup name="other">
import api from '@/api/pm/cost/visa'
import { roles } from '@/utils/constants.js'
import visaedit from './components/visaedit.vue'
import projectSelection from '@/components/pm/projectSelection.vue'

const isEdit = ref(false);
const isShow=ref(false)
const editRef = ref()
const showEdit = ref(false)
const tableRef=ref()
const onClose = (refresh) => {
    showEdit.value = false
    if (refresh) {
        tableRef.value.refresh(true)
    }
}
const proSelect = ref()
const onSearch = () => {
    proSelect.value.show()
}
const prSelectOk = (selectedRowKeys, selectRecords) => {
    console.log("项目选择ok ", selectedRowKeys, selectRecords)
    searchFormState.value.proId = selectRecords[0].id
    searchFormState.value.proName = selectRecords[0].name
}

const searchFormState = ref({
})

const infoOnOpen=()=>{
    infoRef.value.show(record)
}
const refresh = () => {
    tableRef.value.refresh(true)
}
const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 80,
        align: "center",
    },
  
    {
        title: '项目编号',
        dataIndex: 'proCode',
        key: 'proCode',
        width: 160,
        align: "center",
    },
    {
        title: '项目名称',
        dataIndex: 'proName',
        key: 'proName',
        width: 160,
        align: "center",
    },
    {
        title: '签证事由',
        dataIndex: 'item',
        key: 'item',
        width: 160,
        align: "center",
    },

    {
        title: '签证内容',
        dataIndex: 'content',
        key: 'content',
        width: 160,
        align: "center",
    },
    {
        title: '操作人',
        dataIndex: 'createUserName',
        key: 'createUserName',
        width: 160,
        align: "center",
    },
    {
        title: '操作时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 160,
        align: "center",
    },
    {
        title: '操作',
        dataIndex: 'control',
        key: 'control',
        width: 160,
        align: "center",
        fixed:"right"
    },
]
const loadData = (parameter) => {
    console.log('loadData.parameter', parameter)
    searchFormState.value.current = parameter.current
    searchFormState.value.size = parameter.size
    return api.page(searchFormState.value).then((res) => {
        return res
    })
}

const onOpen = (record) => {
    showEdit.value = true
    setTimeout(() => {
            editRef.value.show(record)
    }, 100);
    if (record) { 
        isEdit.value = true
     } else { 
        isEdit.value = false }
}
const remove = (record) => {
    api.delete([{ "id": record.id }]).then(() => {
        tableRef.value.refresh(true)
    })
}
const reset = () => {
    searchFormState.value = {}
}
const submit = () => {
    editRef.value.submit()
}

</script>
<style scoped></style>
